<template>
  <common-card title="今日交易用户数" :value="orderUser">
    <template>
      <v-chart :options="getOptions()"></v-chart>
      <!-- <div
        id="today-user-chart"
        :style="{ width: '100%', height: '100%' }"
      ></div> -->
    </template>
    <template v-slot:footer>
      <div>
        <span>退货率 </span>
        <span class="emphasis">{{ returnRate }}</span>
      </div>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from '../../mixins/commonCardMixin'
import comminDataMixin from '../../mixins/comminDataMixin'
export default {
  mixins: [commonCardMixin, comminDataMixin],
  methods: {
    getOptions() {
      const returnRateData = {
        color: ['#3398DB'],
        xAxis: {
          type: 'category',
          // show: false,
          data: this.orderUserTrendAxis
        },
        yAxis: {
          show: false
        },
        tooltip: {},
        series: [
          {
            name: '用户实时交易量',
            type: 'bar',
            data: this.orderUserTrend,
            barWidth: '60%'
          }
        ],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
      return this.orderUserTrend.length > 0 ? returnRateData : null
    }
  },
  mounted() {
    //   const chartDom = document.getElementById('today-user-chart')
    //   const chart = this.$echarts.init(chartDom)
    //   chart.setOption({
    //     color: ['#3398DB'],
    //     xAxis: {
    //       type: 'category',
    //       // show: false,
    //       data: [
    //         '00:05',
    //         '00:06',
    //         '00:07',
    //         '00:08',
    //         '00:09',
    //         '00:10',
    //         '00:11',
    //         '00:12',
    //         '00:13',
    //         '00:14',
    //         '00:15',
    //         '00:16',
    //         '00:17',
    //         '00:18'
    //       ]
    //     },
    //     yAxis: {
    //       show: false
    //     },
    //     series: [
    //       {
    //         type: 'bar',
    //         data: [
    //           410,
    //           82,
    //           200,
    //           334,
    //           390,
    //           330,
    //           220,
    //           150,
    //           82,
    //           200,
    //           134,
    //           29,
    //           330,
    //           150
    //         ],
    //         barWidth: '60%'
    //       }
    //     ],
    //     grid: {
    //       top: 0,
    //       bottom: 0,
    //       left: 0,
    //       right: 0
    //     }
    //   })
  }
}
</script>

<style scoped>
</style>
